<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/jquery.min.js"></script>

</head>

<body>
  <!-- 文件框 -->
  <input type="file" name="" id="file">
  <!-- 上传按钮 -->
  <button>上传</button>
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(() => {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(() => {
        $('#loading').show()
      })
      // 监听到Ajax请求结束
      $(document).ajaxStop(() => {
        $('#loading').hide()
      })
      $('button').on('click', function () {
        // jq对象无files，所以要转dom对象
        const files = $('#file')[0].files
        if (files.length <= 0) {
          return alert('请先上传文件！')
        }
        const fd = new FormData()
        //这里是把上传的文件追加到fd中
        fd.append('avatar', files[0])
        // 发起 jQuery 的 Ajax 请求，上传文件

        $.ajax({
          type: 'POST',
          data: fd,
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          processData: false,//必须要写，而且是固定写法
          contentType: false,//必须要写，而且是固定写法
          success: res => {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

</html>